<template>
  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mb-4 mt-0">
      Num 组件使用例子
    </h4>
    <div class="flex flex-col gap-3">
      <div>
        <div>原始（original）</div>
        <div class="mt-2 flex gap-4 text-gray">
          <TNum :value="12341234" />
          <TNum :value="23433.2244442" />
          <TNum :value="284544343433.4442" />
        </div>
      </div>
      <div>
        <div>自适应补零（pad-dec）</div>
        <div class="mt-2 flex gap-4 text-gray">
          <TNum :value="2333333333.2544" format="pad-dec" :decimals="8" />
          <TNum :value="2845.442" format="pad-dec" :decimals="8" />
          <TNum :value="4322" format="pad-dec" :decimals="8" />
        </div>
      </div>
      <div>
        <div>固定小数位数（fixed-dec）</div>
        <div class="mt-2 flex flex-wrap gap-4 text-gray">
          <TNum :value="2333333333.2544" format="fixed-dec" :decimals="8" />
          <TNum :value="-2845.442" format="fixed-dec" :decimals="8" colored="full" weakPad />
          <TNum :value="4322" format="fixed-dec" :decimals="8" colored="full" showPos weakPad />
          <TNum class="text-white" :value="0" format="fixed-dec" :decimals="4" colored="full" showPos weakPad />
        </div>
      </div>
      <div>
        <div>最大小数位数（max-dec）</div>
        <div class="mt-2 flex flex-wrap gap-4 text-gray">
          <TNum :value="23333.25132344" format="max-dec" :decimals="4" />
          <TNum :value="2845.442" format="max-dec" :decimals="4" />
          <TNum :value="4322.333333333" format="max-dec" :decimals="4" />
        </div>
      </div>
      <div>
        <div>最小小数位数（min-dec）</div>
        <div class="mt-2 flex flex-wrap gap-4 text-gray">
          <TNum :value="23333.25132344" format="min-dec" :decimals="4" />
          <TNum :value="2845.442" format="min-dec" :decimals="4" />
          <TNum :value="4322" format="min-dec" :decimals="4" />
        </div>
      </div>
      <div>
        <div>限制小数位数（clamp-dec）</div>
        <div class="mt-2 flex flex-wrap gap-4 text-gray">
          <TNum :value="23333.25132344" format="clamp-dec" :decimals="4" />
          <TNum :value="2845.442" format="clamp-dec" :decimals="4" />
          <TNum :value="4322" format="clamp-dec" :decimals="4" />
        </div>
      </div>
    </div>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mb-4 mt-0">
      Amount 组件使用例子
    </h4>
    <div class="flex gap-4">
      <TAmount :value="123.55" symbol="USDT" format="pad-dec" colored="full" />
      <TAmount :value="-123.55" symbol="USDT" format="pad-dec" colored="full" iconPos="left" />
      <TAmount :value="-123.5" :decimals="2" symbol="TRX" format="fixed-dec" colored="full" />
      <TAmount :value="-123.5" :decimals="2" symbol="$" format="fixed-dec" colored="full" iconPos="left" />
      <TAmount :value="-123.5" :decimals="2" symbol="$" format="fixed-dec" colored="full" iconPos="left" useNumColor />
    </div>
  </div>

  <div class="mb-2 items-start gap-3 rounded-xl bg-white/7 p-4">
    <h4 class="mb-4 mt-0">
      Amount 组件配合汇率计算使用
    </h4>
    <div class="flex flex-col gap-4">
      <div>
        <TAmount :value="$store.currency.usdConvert(1238, 'TRX')" symbol="TRX" format="pad-dec" colored="full" />
        <span>将美元转为 TRX 的价值</span>
      </div>
      <div>
        <TAmount :value="$store.currency.convert('TRX', 1000, 'ETH')" symbol="ETH" format="pad-dec" colored="full" />
        <span>将 TRX 的价值转为 ETH 的价值</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
:root {
  background-color: #1d1e24;
  color: #fff;
  -webkit-tap-highlight-color: transparent;
}
</style>
